<template>
    <div>        
        <Echart
            id="bottomLeftChart"
            :options="options"
            height="398px"
            width="100%"
        />
    </div>
</template>

<script>
import Echart from '@/echart/common'
export default {
    components: {
        Echart
    },
    props: {
        cdata: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            options: {}
        }
    },
    watch: {
        cdata: {
            handler(newData) {
                this.options = {
                    title: {
                        left: 'center',
                        text: '分类文章数量比'
                    },                    
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'horizontal',
                        x: 'center',
                        data: newData.lData,
                        top: 34
                    },
                    color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
                    series: [{
                        name: '分类名称',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        center: ['50%', '56%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            fontSize: '12',
                            color: '#6E7079',
                            fontWeight: '400'
                        },
                        data: newData.sData
                    }]
                }
            },
            immediate: true,
            deep: true
        }
    }
}
</script>
